<template>
  <div>
    <div class="fleft">
      <label style="padding-right: 5px;">一级审批</label>
      <ComboGrid
        valueField="userSerial"
        textField="userLname"
        :virtualScroll="true"
        :data="allApproverData"
        v-model="workshopApprover"
        :panelStyle="panelStyle"
        :editable="true"
        @filterChange="filterChange"
      >
        <DataGrid slot="grid" :border="false" class="grid-border">
          <GridColumn field="userNo" title="工号" align="center"></GridColumn>
          <GridColumn field="userLname" title="名称" align="center"></GridColumn>
        </DataGrid>
      </ComboGrid>
    </div>
    <div class="fleft" v-show="showSecond">
      <label style="padding-right: 5px;">二级审批</label>
      <ComboGrid
        valueField="userSerial"
        textField="userLname"
        :virtualScroll="true"
        :data="labourUnionData"
        v-model="labourUnionApprover"
        :panelStyle="panelStyle"
        :editable="true"
        @filterChange="filterChange2"
      >
        <DataGrid slot="grid" :border="false" class="grid-border">
          <GridColumn field="userNo" title="工号" align="center"></GridColumn>
          <GridColumn field="userLname" title="名称" align="center"></GridColumn>
        </DataGrid>
      </ComboGrid>
    </div>
  </div>
</template>

<script>
import user from "@/api/user";

export default {
  name: "selectApprover",
    props:{
        showSecond:{
            type:Boolean,
            default:true
        }
    },
  data() {
    return {
      //选择的一级审批人
      workshopApprover: "",
      //可供选择的一级审批人
      allApproverData: [],
      allApproverData2: [],
      //选择的二级审批人
      labourUnionApprover: "",
      //供选择的工会审批人
      labourUnionData: [],
      labourUnionData2: [],
      panelStyle: {
          height: "auto",
          maxHeight: "190px",
          borderWidth: "1px",
          borderColor: "#ccc",
          borderStyle: "solid"
      },
    };
  },
  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      user.getApproverListByBatch(null).then(res => {
        if (res.code == "200") {
          this.allApproverData = res.result;
          this.allApproverData2 = res.result;
        }
      });
      user.getSecondListByBatch(null).then(res => {
        if (res.code == "200") {
          this.labourUnionData = res.result;
          this.labourUnionData2 = res.result;
        }
      });
    },
    getSelectUsers() {
      let selectUsers = [];
      if (this.workshopApprover != "") {
        selectUsers.push(this.workshopApprover);
      }
      if (this.labourUnionApprover != "") {
        selectUsers.push(this.labourUnionApprover);
      }
      return selectUsers;
    },
    //获取一级审批人
    getWorkshopApprover() {
      if (this.workshopApprover != "") {
        return this.workshopApprover;
      }
      return "";
    },
    //获取二级审批人
    getLabourUnionApprover() {
      if (this.labourUnionApprover != "") {
        return this.labourUnionApprover;
      }
      return "";
    },
    // 一级审批人输入值变化时
    filterChange(e){
      // console.log( e.filterValue);
      // 审批人姓名 userLname 审批人工号 userNo
      if (e.filterValue == "") {
        this.allApproverData = this.allApproverData2;
      } else {
        this.workshopApprover = e.filterValue;
        let arr = this.allApproverData2.filter( (el) => {
          if (el.userLname.indexOf(e.filterValue.replace(/\s*/g,"")) != -1 || el.userNo.indexOf(e.filterValue.replace(/\s*/g,"")) != -1) {
            return el
          }
        });
        // console.log(this.workshopApprover);
        this.allApproverData = arr;
      }
    },
    filterChange2(e){
      // console.log( e.filterValue);
      // 审批人姓名 userLname 审批人工号 userNo
      if (e.filterValue == "") {
        this.labourUnionData = this.labourUnionData2;
      } else {
        this.labourUnionApprover = e.filterValue;
        let arr = this.labourUnionData2.filter( (el) => {
          if (el.userLname.indexOf(e.filterValue.replace(/\s*/g,"")) != -1 || el.userNo.indexOf(e.filterValue.replace(/\s*/g,"")) != -1) {
            return el
          }
        });
        this.labourUnionData = arr;
      }
    },

  }
};
</script>
<style scoped></style>
